<template>
  <!-- 关于我们 -->
  <section id="about" class="py-16 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex flex-col md:flex-row items-center">
        <div class="md:w-1/2 mb-8 md:mb-0">
          <img
            src="https://picsum.photos/800/600?random=60"
            alt="关于初练音乐"
            class="w-full h-auto rounded-xl shadow-lg"
          />
        </div>
        <div class="md:w-1/2 md:pl-12">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark"
            >关于初练音乐</h2
          >
          <p class="mt-4 text-neutral">
            初练音乐成立于2014年，是中国领先的数字乐谱销售平台。我们致力于为音乐爱好者、学生和专业音乐家提供高质量、正版授权的乐谱资源。
          </p>
          <div class="mt-6 space-y-4">
            <div class="flex items-start">
              <div class="mt-1 mr-4 text-primary">
                <i class="fa fa-check-circle text-xl"></i>
              </div>
              <div>
                <h4 class="font-medium">正版保障</h4>
                <p class="text-sm text-neutral mt-1"
                  >所有乐谱均获得版权方授权，确保合法使用</p
                >
              </div>
            </div>
            <div class="flex items-start">
              <div class="mt-1 mr-4 text-primary">
                <i class="fa fa-check-circle text-xl"></i>
              </div>
              <div>
                <h4 class="font-medium">高清PDF格式</h4>
                <p class="text-sm text-neutral mt-1"
                  >提供高质量PDF文件，支持打印和多设备阅读</p
                >
              </div>
            </div>
            <div class="flex items-start">
              <div class="mt-1 mr-4 text-primary">
                <i class="fa fa-check-circle text-xl"></i>
              </div>
              <div>
                <h4 class="font-medium">专业编辑团队</h4>
                <p class="text-sm text-neutral mt-1"
                  >由专业音乐家组成的编辑团队，确保乐谱准确性</p
                >
              </div>
            </div>
          </div>
          <div class="mt-8">
            <a
              href="#"
              class="inline-block px-6 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors"
            >
              了解更多
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup></script>
